05

!important不能影响就近原则，远的标签如果加上!important也干不过近的标签！

!important不能影响继承权重是0，通过继承的标签加上!important也干不过直接选中的标签！

网页中的所有标签都是盒子，都是矩形，都有width、height、padding、border、margin属性的。 最重要的一个知识点，就是width和真实宽度的关系。

也就说，padding、border都是外扩的。

padding就是内边距，指的是边框内侧到内容的距离。 padding的设置有很多方法 padding:50px;设置四个方向的padding都是50px;

四个值： padding:10px 20px 30px 40px;等价于单独设置了上、右、下、左的padding分别分10、20、30、40等价于

三个值： padding:10px 20px 30px; 等价于

两个值： padding:10px 20px; 等价于

注意，一些元素默认带有padding：比如ul等等， 为了防止这些默认的padding、margin影响我们制作页面，我们要在页面开头书写：

就能把所有标签的默认的padding、margin都去掉。 当然这么写有效率问题，别担心，项目课将告诉你最正确的清除默认padding、margin的方法。

边框有三要素：粗细、线型、颜色。 border:1px solid red; px就是边框的宽度， solid就是边框的线型 ， red就是边框的颜色。

线型：

工作中只许使用solid(实线)和dashed(虚线)，其他的所有的线型都有兼容性问题，如果想制作其他类型的边框，必须切图！

兼容性问题，IE浏览器中和Chrome浏览器中的边框，明显长得不一样。

注意，三要素分别对应了三个小属性： border:10px solid red; 等价于

我们称呼border为“复合属性”。

特别的，如果我们想为某一个边，单独设置三要素，那么可以拆分为12个小属性：

border:10px solid red; 等价于：

更特别的，boder-color是可以按照上右下左的顺序书写： border-color:red yellow green; 上边是红色， 左边、右边是黄色， 下边是绿色。

小练习1：

小练习2：

小练习3：

如果某一个边框我们不想要，那么就写none border-bottom:none; 下边框就没有了。

自己这个盒子的边框外侧， 到其他盒子边框外侧的距离

margin有四个方向，分别是 margin-top、margin-right、margin-bottom、margin-left。

塌陷现象：

去掉ul的小圆点，要给ul加

如果想让盒子中的文字水平居中，那么要给盒子设置 text-align:center; 这个属性继承。 它还有两个可能的值：

这个方法，只能居中文本流的东西(文字、图片、表单元素)。一定要记住，这个属性要设置给盒子，不能设置给这些文字、图片、表单元素。

让盒子设置：margin:0 auto;

margin: 0 auto;是给盒子用的，要加给盒子自己。它将在自己的父元素内部居中。

line-height:盒子的高度; 行高=盒子高， 此时单行文本就将在盒子中居中。注意，这个方法只能适用于单行文本，多行不适用。

点击查看更多

我们发现，Fireworks作图，可以在任何一个地方落笔；word这个软件则不一样，有一个“光标”位置，你必须在当前光标位置去书写文字。

第二行文字的位置，仰赖于第一行文字，比如第一行文字多，第二行文字就下移了；比如第一行文字大，第二行文字又下移了。

网页也是这样，从左至右、从上到下，有一个“光标”的概念。 标准文档流中，内置了很多性质。

标签内的文字，不管有多少个空格、换行、tab，都会缩减为同一个空格。

最最重要的性质来了，就是标准文档流中，把元素分为“块级元素”和“行内级元素”两种。

块级元素是能单独在一行的，行内元素是不能单独在一行的。 我们把HTML标签分为两大类：

块级元素：

行内级元素：

给任何一个元素，设置 display:block; 它将转为块级元素，拥有块级元素的所有性质；

相仿的，给任何一个元素，设置 display:inline; 它将转为行内元素，拥有行内元素的所有性质；

有什么用？ 把一个块 → 行内 丝毫无用，工作10年都遇不见。 但是行内 → 块 非常有用！

我们发现标准文档流是做不出网页的，因为它太迂腐：能设置宽高的不能并排，能并排的不能设置宽高。

所以脱离标准流！ 脱离标准流一共有三种方法：浮动、绝对定位、相对定位。

浮动的理论知识挺多的，头头是道。但是我们为了考虑吸收，我们今天忽视科学性，就看一些皮毛的“浮动”。下次课我们深入研究浮动。

今天只用，不研究。

float就是英语“浮”的意思，left就是左浮动。要浮动就是两个都要浮动的。 float:left; right右浮动。 float:right;

浮动的元素会去贴父盒子的边，贴边的过程中，如果被它的哥哥们挡住了，就会贴在哥哥的边上。

如果要保证儿子的并排，父亲要有足够的width。

我们下节课将详细研究浮动，记住一个结论：浮动的元素不能撑高父亲了。

05_CSS入门和高级技巧(3)

原文：https://www.cnblogs.com/shy-kevin/p/11369592.html